<script setup>
import { ref, onActivated, onDeactivated } from "vue";
import { use } from "echarts/core";
import { SVGRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { GridComponent } from "echarts/components";
import { TitleComponent } from "echarts/components";
import { TooltipComponent } from "echarts/components";
import VChart from "vue-echarts";

const props = defineProps(["timeType"]);
const date = defineModel("date");
const counts = defineModel("counts");

use([
  SVGRenderer,
  GridComponent,
  TitleComponent,
  TooltipComponent,
  BarChart
]);

const show = ref(false);
const option = ref({
  xAxis: {
    type: "category",
    data: date.value,
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {},

  title: {
    text: "Total Data",
    left: "center",
    data: ["2015", "2015"]
  },

  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },

  series: [
    {
      type: "bar",
      barWidth: "60%",
      data: counts.value
    }
  ]
});

onActivated(() => {
  show.value = true;
});

onDeactivated(() => {
  show.value = false;
});
</script>

<template>
  <v-chart v-if="show" :option="option" autoresize />
</template>
